<template>
  <div class="operate-btn-wrap">
    <el-button v-if="btnAuthObj.add" class="operate_add" type="primary" @click="addUser">
      <i class="iconfont iconicon_add"></i>
      {{ btnTextObj.add }}
    </el-button>
    <el-button
      v-if="btnAuthObj.del"
      :disabled="hasSelected ? false : true"
      class="operate_del"
      type="info"
      @click="dialogVisible = true"
    >
      <i class="iconfont iconicon_trash"></i>
      {{ btnTextObj.del }}
    </el-button>
    <el-button
      v-if="btnAuthObj.enable"
      :disabled="hasSelected ? false : true"
      class="operate_enable"
      type="info"
      @click="enableUser"
    >
      <i class="iconfont iconicon_enabled"></i>
      {{ btnTextObj.enable }}
    </el-button>
    <el-button
      v-if="btnAuthObj.disable"
      :disabled="hasSelected ? false : true"
      class="operate_disabled"
      type="info"
      @click="disableUser"
    >
      <i class="iconfont iconicon_disabled"></i>
      {{ btnTextObj.disable }}
    </el-button>
    <el-dialog
      class="dialog-wrap"
      title="提示"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      width="500px"
      :show-close="true"
      top="30vh"
    >
      <span class="content">
        <i class="iconfont iconar-alert"></i>
        <span>此操作将删除该数据，是否继续？</span>
      </span>

      <span slot="footer" class="dialog-footer">
        <el-button class="cancel-btn" type="info" @click="dialogVisible = false">取 消</el-button>
        <el-button class="submit-btn" type="primary" @click="deleteUser">确 认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OperateBtnGroup',
  components: {
  },
  inheritAttrs: false,
  props: {
    btnText: {
      type: Object,
      default: () => { }
    },
    btnAuth: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      visiblePop: false,
      selectIndex: -1,
      dialogVisible: false
    }
  },
  computed: {
    btnAuthObj() {
      return Object.assign({
        add: true,
        del: true,
        enable: true,
        disable: true
      }, this.btnAuth)
    },
    btnTextObj() {
      return Object.assign({
        add: '添加用户',
        del: '删除用户',
        enable: '启用',
        disable: '禁用'
      }, this.btnText)
    },
    hasSelected() {
      return this.selectIndex >= 0
    }
  },
  created() {
  },
  methods: {
    addUser() {
      this.$emit('addUser')
    },
    deleteUser() {
      this.dialogVisible = false
      this.$emit('deleteUser')
    },
    enableUser() {
      this.$emit('enableUser')
    },
    disableUser() {
      this.$emit('disableUser')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables";
@import "~@/assets/styles/mixin";

.operate-btn-wrap {
  height: 32px !important;
  ::v-deep .el-button--info {
    background-color: $operateBtnBack !important;
    border-color: $operateBtnBack !important;
  }
  .el-button--info.is-disabled,
  .el-button--info.is-disabled:hover,
  .el-button--info.is-disabled:focus,
  .el-button--info.is-disabled:active {
    color: #495057 !important;
    background-color: #e3e4e8 !important;
    border-color: #d8d9df !important;
  }
  ::v-deep .el-button--small {
    width: auto;
    height: 32px !important;
    font-size: 13px !important;
    padding: 9px 12px 10px 12px !important;
    border: 0;
    float: left;
    i {
      font-size: 12px !important;
    }
  }
  ::v-deep .dialog-wrap {
    .el-dialog {
      border-radius: 4px;
    }

    .el-dialog__footer {
      padding: 16px;
      display: flex;
      justify-content: flex-end;
      border-radius: 4px 4px 0 0;
      .cancel-btn {
        width: 72px;
        height: 36px;
        padding: 12px 24px;
        background: $operateBtnBack;
        font-size: 13px;
      }
      .submit-btn {
        width: 108px;
        height: 36px;
        padding: 12px 44px;
        background: $btnColor;
        font-size: 13px;
      }
    }
    .el-dialog__body {
      padding: 16px 16px 18px;
    }
    .content {
      .iconar-alert {
        color: #f1b44c;
        font-size: 20px;
        line-height: 20px;
        vertical-align: middle;
        padding-right: 12px;
      }
      span {
        line-height: 20px;
        font-size: 14px;
      }
    }
    ::v-deep .dialog-wrap {
      .el-dialog {
        border-radius: 4px;
      }

      .el-dialog__footer {
        padding: 16px;
        display: flex;
        justify-content: flex-end;
        border-radius: 4px 4px 0 0;
        .cancel-btn{
          width: 72px;
          height: 36px;
          padding: 12px 24px;
          background: $operateBtnBack;
          font-size: 13px;
        }
        .submit-btn{
          width: 108px;
          height: 36px;
          padding: 12px 44px;
          background: $btnColor;
          font-size: 13px;
        }
      }
      .el-dialog__body {
        padding: 16px 16px 18px;
      }
      .content {
        .iconar-alert {
          color: #F1B44C;
          font-size: 20px;
          line-height: 20px;
          vertical-align:middle;
          padding-right: 12px;
        }
        span {
          line-height: 20px;
          font-size: 14px;
        }
      }

    }

  }
}
</style>
